<template>
	<div id="SutraArea">
		<x-header :left-options="{showBack: false}" :title="special_name" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="hd_bg" v-if="special_pic.indexOf('/uploads') == 0" v-bind:style="{'background-image':'url('+ '/los' + special_pic + ')'}">
		</div>
		<div class="hd_bg" v-else v-bind:style="{'background-image':'url('+ special_pic + ')'}">
		</div>
		<div class="contentWrap">
			<div>
				<ul class="wrapper">
					<li v-for="item in specialList">
						<router-link :to="'/Detail/id/' + item.auction_id">
							<img v-if="item.goods_thumb.indexOf('/uploads') == 0" :src="'/los/uploads/thumb/goods/' + item.goods_id + '_109X109.jpeg'" alt="" />
							<img v-else :src="item.goods_thumb" />
							<div class="desc">
								<p class="title">{{item.goods_name}}</p>
								<p class="price">限时活动专区</p>
								<p class="assess">当前价:<span>￥{{item.auction_bidprice}}</span><b>立即出价</b></p>
							</div>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
		<toast v-model="success" type="text" width='2.8rem' is-show-mask>{{msg}}</toast>
	</div>
</template>
<script>
	import $ from 'jquery'
	import axios from 'axios'
	import BScroll from 'better-scroll';
	import CountDown from 'vue2-countdown'
	import { XHeader, Grid, GridItem, XProgress, Box, Loading, Toast } from 'vux'
	export default {
		data() {
			return {
				specialList: [],
				percent: '',
				cur_time: '',
				special_pic: '',
				show1: false,
				text: '加载中',
				success: false,
				special_code: '',
				special_name: '',
				special_id: 0,
				msg: '',
				flag: true,
				cache: true,
				shareUrl: ''
			}
		},
		components: {
			XHeader,
			Grid,
			GridItem,
			XProgress,
			Box,
			CountDown,
			BScroll,
			Loading,
			Toast
		},
		beforeRouteLeave(to, from, next) {
			console.log(to);
			console.log(from);
			if(to.name == 'Detail') {
				from.meta.keepAlive = true;
			} else {
				from.meta.keepAlive = false;
			}
			next();
		},
		mounted() {
			this.getSpecialInfo();
		},
		methods: {
			getSpecialInfo: function() {
				this.special_code = this.$route.params.special_code;
				this.$http({
					method: 'GET',
					url: '/los/api/special/info.json?special_code=' + this.special_code,
					data: ''
				}).then((result) => {
					this.special_id = result.data.special_id;
					this.special_name = result.data.special_name;
					this.special_pic = result.data.special_pic;
					if(result.data.auction_count > 0) {
						this.getAuctionInfo();
					}
					if(result.data.seckill_count > 0) {
						this.getSeckillInfo();
					}

				}).catch((err) => {

				})
			},
			getAuctionInfo: function() {
				let more = true;
				let page = 1;
				let _this = this;
				this.$http({
					method: 'GET',
					url: '/los/api/special/auction_list.json?special_id=' + this.special_id,
					data: ''
				}).then((result) => {
					this.cache = false;
					this.specialList = result.data.data;
					this.cur_time = result.data.cur_time;
					this.$nextTick(() => {
						this.cache = true;
					});
				}).catch((err) => {
					console.log(err);
				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/special/auction_list.json?special_id=' + _this.special_id + '&page=' + page).then(function(result) {
								$.each(result.data.data, function(index, val) {
									_this.specialList.push(val);
								});
								more = true;
								if(result.data.data == '') {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})
			},
			getSeckillInfo: function() {
				let more = true;
				let page = 1;
				let _this = this;
				this.$http({
					method: 'GET',
					url: '/los/api/special/seckill_list.json?special_id=' + this.special_id,
					data: ''
				}).then((result) => {
					this.cache = false;
					this.specialList = result.data.data;
					this.cur_time = result.data.cur_time;
					this.$nextTick(() => {
						this.cache = true;
					});
				}).catch((err) => {
					console.log(err);
				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/special/seckill_list.json?special_id=' + this.special_id + '&page=' + page).then(function(result) {
								$.each(result.data.data, function(index, val) {
									_this.killInfo.push(val);
								});
								more = true;
								if(result.data.data == '') {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})
			},

			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	.header {
		background-color: #fff !important;
	}
	
	.main {
		padding: 0.26666rem 0.16rem;
	}
	
	.no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto;
	}
	
	.no-data img {
		width: 100%;
	}
	
	.hd_bg {
		width: 100%;
		height: 5.33rem;
		background-size: 100% 100%;
	}
	
	.hd_bg img {
		width: 100%;
		height: 100%;
	}
	
	.list .title-bar {
		width: 100%;
		height: 1.06rem;
		line-height: 1.06rem;
		background: #fff;
		padding: 0 0.26rem;
		overflow: hidden;
		border-top-left-radius: 0.13rem;
		border-top-right-radius: 0.13rem;
	}
	
	.list .title-bar .timer {
		float: left;
		font-size: 0.34rem;
		color: #333;
	}
	
	.list .title-bar .timer .count-down {
		font-size: 0.34rem;
	}
	
	.list .title-bar .crazy {
		float: right;
		font-size: 0.32rem;
		color: #777;
	}
	
	.list .item {
		margin-bottom: 0.26666rem;
		padding: 0.37333rem 0.26666rem;
		border-radius: 0.05333rem;
		background-color: #fff;
		overflow: hidden;
		position: relative;
		border-bottom-left-radius: 0.13rem;
		border-bottom-right-radius: 0.13rem;
	}
	
	.list .item:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		padding: 0 0.26rem;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.list .item .img {
		float: left;
		width: 2.69rem;
		height: 2.69rem;
		font-size: 0;
		border-radius: 0.05333rem;
	}
	
	.list .item .info {
		position: relative;
		height: 2.93333rem;
		padding-left: 2.90666rem;
	}
	
	.list .item .info .name {
		margin-bottom: 0.32rem;
		padding-top: 0.10666rem;
		font-size: 0.34rem;
		height: 1.06666rem;
		line-height: 0.50666rem;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden;
	}
	
	.list .item .info .other {
		overflow: hidden;
		position: relative;
	}
	
	.list .item .info .other .price {
		float: left;
		margin-top: 0.34rem;
		font-size: 0.45rem;
		color: #DA4240;
	}
	
	.list .item .info .offer {
		width: 2.08rem;
		margin-top: 0.26rem;
	}
	
	.list .item .info .offer a {
		margin-bottom: 0.18666rem;
		width: 100%;
		height: 0.74666rem;
		color: #fff;
		font-size: 0.37333rem;
		line-height: 0.74666rem;
		text-align: center;
		background-color: #A30000;
		border-radius: 0.05333rem;
		display: inline-block;
	}
	
	.weui-progress {
		width: 65%;
	}
	
	.list .item .info .ctxt {
		position: absolute;
		top: 0;
		width: 60%;
		border-radius: 0.16rem;
		text-align: left;
		padding-left: 0.26rem;
		color: #ff9492;
	}
	
	.list .item .info .percent {
		position: absolute;
		top: 0;
		width: 65%;
		padding-right: 0.26rem;
		border-radius: 0.16rem;
		text-align: right;
		padding-left: 0.26rem;
		color: #ff9492;
		margin-top: 0.05rem;
	}
	
	.contentWrap {
		background: #eef2f4;
		padding: 0.26rem;
	}
	
	.contentWrap ul {
		width: 100%;
		height: 100%;
	}
	
	.contentWrap ul li {
		width: 100%;
		overflow: hidden;
		position: relative;
		border-radius: 0.1rem;
		height: 3.33rem;
		margin-bottom: 0.26rem;
	}
	
	.contentWrap ul li img {
		float: left;
		width: 3.33rem;
		height: 3.33rem;
		border-bottom-left-radius: 0.1rem;
		border-top-left-radius: 0.1rem;
	}
	
	.contentWrap ul li .desc {
		float: right;
		width: 64.86%;
		height: 3.33rem;
		overflow: hidden;
		background: #fff;
		border-bottom-right-radius: 0.1rem;
		border-top-right-radius: 0.1rem;
		padding: 0.37rem 0.26rem 0.37rem 0.48rem;
	}
	
	.contentWrap ul li .desc .title {
		font-size: 0.4rem;
		height: 0.6rem;
		color: #333;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.contentWrap ul li .desc .price {
		color: #aaa;
		font-size: 0.34rem;
	}
	
	.contentWrap ul li .desc .assess {
		float: left;
		margin-top: 0.93rem;
		font-size: 0.34rem;
		color: #aaa;
		overflow: hidden;
		position: relative;
		line-height: 0.6rem;
		width: 100%;
	}
	
	.contentWrap ul li .desc .assess span {
		font-size: 0.42rem;
		color: #da4240;
	}
	
	.contentWrap ul li .desc .assess b {
		font-weight: normal;
		font-size: 0.34rem;
		right: 0;
		position: absolute;
		background: #a30000;
		width: 1.6rem;
		height: 0.61rem;
		line-height: 0.61rem;
		border-radius: 0.05rem;
		color: #fff;
		display: inline-block;
		text-align: center;
	}
</style>